<template>
  <div class="share">
    <Follow :isFollow="isFollow"/>
    <Bind :isBind="isBind" :queryData="queryData" v-if="!isBind"/>
    <Ruler :isRuler="isRuler" @closeRuler="chosePanel"/>
    <div class="hadHelp panel animated" :class="isHelp?'fadeIn':'fadeOut'" v-if="isHelp">
      <div class="dialog-panel">
        <ul class="content">
          <li>您今日已助力过请明天再帮助小伙伴吧~</li>
          <li class="check-btn" @click.passive.stop="helpFunc"></li>
        </ul>
        <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
      </div>
    </div>
    <div class="flower-panel"></div>
    <div class="wave-footer"></div>
    <div class="container">
      <header class="animated fadeInDown"></header>
      <article class="title" v-if="!hadRec">
        <p>
          <span class="userName">{{food.nickname}}</span>
          正在集“{{food.foodName}}”的食材,现邀您助TA集“{{food.materialName}}”
        </p>
      </article>
      <article class="title" v-if="hadRec">
        <p>其他手速快的小伙伴已经为TA收集了“{{food.materialName}}”</p>
      </article>
      <nav>
        <img :src="food.collected?food.materialImgUrl:food.materialImgHuiUrl" alt>
      </nav>
      <footer>
        <p
          :class="!isBtn?'research':'had-research pointerEvents'"
          ref="research"
          @click.passive.stop.once="researchFunc"
        ></p>
        <p class="help-research" ref="help-research" @click.passive.stop.once="helpFunc"></p>

        <p class="ruler-btn" @click.passive.stop="showRuler">
          <span>活动规则</span>
          <i class="wenhao"></i>
        </p>
      </footer>
    </div>
  </div>
</template>
<script>
import Ruler from '@/components/Ruler'
import ruler from '@/mixins/ruler'
import Bind from '@/components/Bind'
import Follow from '@/components/Follow'
import common from '@/mixins/common'
import { queryHelp, queryUserHelp, helpResearch, checkUser } from '@/axios/api'
import { GetRequest } from '@/assets/lib/tool'
export default {
  data() {
    return {
      isBind: true,
      isFollow: true,
      hadRec: false,
      isHelp: false,
      isBtn: false,
      food: {},
      queryData: {}
      //   foodImg: require('@/assets/images/meicai/meicai.png'),
    }
  },
  components: { Ruler, Follow, Bind },
  mixins: [ruler],
  created() {
    let [uC, mC] = decodeURIComponent(GetRequest().state).split('@');
    this.queryData = {
      uC: uC,
      mC: mC
    }
    console.log('uc', 'mc', uC, mC);

    //查询当前用户是否助力
    queryUserHelp().then(rs => {
      this.isHelp = rs.res.helped;
    })
    queryHelp({ uC: uC, mC: mC }).then(rs => {
      this.hadRec = rs.res.collected;
      this.food = rs.res;
      console.log(rs);
    })
    checkUser().then(rs => {
      let user = rs.res;
      console.log(user);
      if (false === user.subscribe) {
        this.isFollow = false;
        return;
      }
      if (false === user.bindPhoneStatus) {
        this.isBind = !this.isBind;

      }

    })
  },
  methods: {
    researchFunc() {
      let [uC, mC] = decodeURIComponent(GetRequest().state).split('@');
      helpResearch({ sU: uC, mC: mC }).then(rs => {
        console.log(rs);
        if ('200' === rs.code) {

          this.isBtn = true;
          layer.open({
            content: rs.msg,
            skin: 'msg',
            time: 2 //2秒后自动关闭
          })
        } else if ('201' === rs.code) {
          this.hadRec = true;
        } else if ('999' === rs.code) {
          // this.isBind = !this.isBind;
          layer.open({
            content: rs.msg,
            skin: 'msg',
            time: 2 //2秒后自动关闭
          })
          setTimeout(() => {
            this.$router.push({ name: 'home' })
          }, 2000)
        }

      })
    },
    helpFunc() {
      location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf71dfa4539d2f215&redirect_uri=http%3A%2F%2Fwkfw.unisk.cn%2Fwxjx%2Fgame%2Fentrance%2FOv41jtk6fOabGlCy&response_type=code&scope=snsapi_base&state=&component_appid=wx9ca145ee3ab86a74#wechat_redirect";
    }
  },
}
</script>

<style lang="less" scoped>
.hadHelp {
  .dialog-panel {
    width: 588px;
    height: 592px;
    overflow: hidden;
    background: url("../assets/images/dialog-panel.png") no-repeat;
    background-size: 588px 592px;

    ul {
      margin: 90px 0;
      padding: 0 100px;
      width: 588px;
      height: 412px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      li {
        letter-spacing: 0.2em;
        line-height: 1.5em;
        font-weight: bold;
        color: #fff;
        font-size: 35px;
      }
      .check-btn {
        margin-top: 100px;
        width: 410px;
        height: 88px;
        background: url("../assets/images/check-btn.png") no-repeat center
          center;
        background-size: 90%;
      }
    }
  }
}
.share {
  width: 100%;
  height: 100%;
  font-size: 24px;
  background: url("../assets/images/wave.png");
  background-size: 100% auto;
  .flower-panel {
    position: fixed;
    z-index: 333;
    width: 100%;
    height: 100%;
    font-size: 24px;
    background: url("../assets/images/bg.png") no-repeat;
    background-size: 100% auto;
  }
  .wave-footer {
    position: fixed;
    bottom: 0;
    z-index: 333;
    width: 640px;
    height: 65px;
    background: url("../assets/images/flow.png") no-repeat;
    background-size: 640px 65px;
  }
  .container {
    position: relative;
    z-index: 666;
    .title {
      padding: 0 30px;
      display: flex;
      .userName {
        width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    header {
      width: 100%;
      height: 192px;
      background: url("../assets/images/share-panel.png") no-repeat;
      background-size: 100% auto;
    }
    article {
      margin-top: 53px;
      text-align: center;
      line-height: 1.5em;
      font-size: 34px;
      color: #ffffff;
      font-weight: bold;
    }
    nav {
      text-align: center;
      margin: 20px auto;
      img {
        width: 300px;
      }
    }
    footer {
      .research {
        margin: 0 auto;
        width: 505px;
        height: 96px;
        background: url("../assets/images/share-btns.png") no-repeat;
        background-size: 505px 220px;
      }
      .help-research {
        margin: 20px auto;
        width: 505px;
        height: 96px;
        background: url("../assets/images/share-btns.png") no-repeat 0 -120px;
        background-size: 505px 220px;
      }
      .had-research {
        margin: 0 auto;
        width: 504px;
        height: 104px;
        background: url("../assets/images/had-rec.png") no-repeat;
        background-size: 504px 104px;
      }
    }
    .ruler-btn {
      margin: 0 auto;
      text-align: center;
      color: #faf3e7;
      font-size: 24px;
      display: flex;
      justify-content: center;
      justify-items: center;
      span {
        align-self: center;
      }
      .wenhao {
        align-self: center;
        margin: auto 10px;
        width: 22px;
        height: 22px;
        background: url("../assets/images/wenhao.png") no-repeat;
        background-size: 100% auto;
      }
    }
  }
}
</style>
